<template>
    <div class="page-content" id="thecanv">
        <FloatImgBtn @onFloatBtnClicked="Screen" :text="text"></FloatImgBtn>
        <!-- 加载动画 -->
        <div class="loads" v-show="isload">
          <dv-loading style="width: 250px; height: 250px">Loading...</dv-loading>
        </div>

        <!-- 头部 -->

        <el-row style="margin-bottom:10px">
            <el-col :span="8" class="biaoti"><dv-decoration-7 style="width:100%;height:30px;">生产消费分析</dv-decoration-7></el-col>
            <el-col :span="8" class="biaoti"></el-col>
            <!-- <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
            <dv-decoration-8 style="width:300px;height:50px;" /> -->
            <el-col :span="8" class="biaoti"></el-col>
        </el-row>

        <!-- 头部 -->

        <div class="biaoti" style="padding:20px 0"><dv-decoration-10 style="width:90%;height:5px;" /></div>

        <!-- 内容 -->

        <!-- 概览 -->
        <div class="headshow">
            <dv-border-box-11 title="概览" style="height:auto;padding:90px 20px 20px 20px;width:60%">
                <el-row class="jichushuju" style="margin-bottom:30px">
                    <el-col :span="12" class="shulian" style="flex-direction: column;">
                        <dv-decoration-11 style="height:50%;width:100%">
                            养殖基地数量: {{122}} 座
                        </dv-decoration-11>
                        <dv-decoration-11 style="height:50%;width:100%">
                            加工厂数量: {{161}} 间
                        </dv-decoration-11>
                    </el-col>
                    <el-col :span="12" class="shulian">
                        <dv-decoration-11 style="width:100%;height:100%;">
                            <ul style="list-style-type: disc;">
                                <strong style="font-weight: 900;">当前员工数量：{{288}}名</strong>
                                <li>养殖员工：<strong style="font-weight: 900;">{{152}}</strong> 名</li>
                                <li>加工员工：<strong style="font-weight: 900;">{{103}}</strong> 名</li>
                                <li>管理员：<strong style="font-weight: 900;">{{50}}</strong> 名</li>
                            </ul>
                        </dv-decoration-11>
                    </el-col>
                </el-row>
                <el-row  class="jichushuju" style="margin-bottom:10px">
                    <el-col :span="12" class="shulian">
                        <dv-decoration-11 style="width:100%;height:100%;">
                            <ul style="list-style-type: disc;">
                                <li>本月订单数量：<strong style="font-weight: 900;">{{15613}}</strong> 单</li>
                                <li>订单总金额：<strong style="font-weight: 900;">{{962512}}</strong> 元</li>
                                <li>营业额较上月：<strong style="font-weight: 900;">{{15}}</strong> %</li>
                            </ul>
                        </dv-decoration-11>
                    </el-col>
                    <el-col :span="12" class="shulian">
                        <dv-decoration-9 style="width:150px;height:150px;">15%</dv-decoration-9>
                    </el-col>
                </el-row>
            </dv-border-box-11>

            <dv-border-box-10 style="width:40%;height:500px" class="shulian">
                <div class="yuangongtit">往年员工数量对比</div>
                <yuangong ref="yuangong"></yuangong>
            </dv-border-box-10>
        </div>
        <!-- 概览 -->
        <!--生产分析-->
        <div style="width:100%">
            <dv-border-box-12 style="width:97%;height:auto;padding:20px">
                 <productanaly ref="product"></productanaly>
            </dv-border-box-12>
        </div>
        <!--生产分析-->
        <!-- 消费分析 -->
        <div style="width:100%">
            <dv-border-box-12 style="width:97%;height:auto;padding:20px">
                <pay ref="pay1"></pay>
            </dv-border-box-12>
        </div>
        <!-- 消费分析 -->

        <!-- 内容 -->
    </div>
</template>

<script>
import FloatImgBtn from '../../components/LeadershipPositions/Consumption/FloatImgBtn'
import yuangong from '../../components/LeadershipPositions/yuangong'
import pay from '../../components/LeadershipPositions/pay'
import { fullScreen, exitFullScreen } from '../../utils/fullScreen'
import productanaly from '../../components/LeadershipPositions/productanaly'
export default {
  name: "Consumption",
  components: {
      FloatImgBtn,
      yuangong,
      pay,
      productanaly
  },
  data () {
    return {
        text: '点击全屏',
        isload:false,
    }
  },
//   created(){
//     this.fnload();//加载
//   },
  methods:{
    fnload() {
      setTimeout(() => {
        this.isload = false;
      }, 2000);
    },
    // 屏幕放大时触动
    suit() {
        document.getElementById('thecanv').style.setProperty('--size','18px')
        this.$refs.yuangong.screenchange()
        // 消费模块
        this.$refs.pay1.suit()
        // 生产模块
        this.$refs.product.suit()
    }, 
    // 屏幕恢复时触动
    res() {
        document.getElementById('thecanv').style.setProperty('--size','14px')
        this.$refs.yuangong.resscreen()
        // 消费模块
        this.$refs.pay1.res()
        // 生产模块
        this.$refs.product.res()
    },
    //屏幕放大时调整图表的位置
    Screen() {
      if(this.text == '点击全屏') {
          fullScreen(document.getElementById('thecanv'));
          // 屏幕放大触动子组件方法 使图表适应
          this.suit()
          this.text = '返回'
      }
      else {
          exitFullScreen(document.getElementById('thecanv'))
          // 屏幕恢复 图表padding恢复
          this.res()
          this.text = '点击全屏'
      }
    },
  }
};
</script>

<style lang="scss" scoped>
#thecanv {
    $shuliantextsize: var(--size,15px);

    background-image: url("../../assets/image/bg.jpg");
    background-size: 100% 100%;

    overflow-y:auto;
    height: auto;

    .loads {
    width: 20%;
    height: 20%;
    align-items: center;
    margin: 100px auto
    }
    .headshow {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        padding-bottom: 20px;
        .yuangongtit {
            width: 100%;
            text-align: center;
            align-items: center;
            color: whitesmoke;
            font-weight: 900;
            padding: 10px 0;
        }
    }
    .jichushuju {
        width: 100%;
        height: 150px;
        .el-col {
            height: 100%;
        }
        .shulian {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: $shuliantextsize;
            font-weight: 900;
            color: whitesmoke;
        }
    }
    .biaoti {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        font-weight: 900;
        color: whitesmoke;
    }
}
</style>